<template>
  <div class="rule-container">
    <div class="create-container">
      <el-button type="primary" @click="open">增加停车计费规则</el-button>
      <el-button @click="delMore">批量删除</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="ruleList" style="width: 100%" @selection-change="fn">
        <el-table-column  type="selection" width="100" />
        <el-table-column  type="index" label="序号" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上限(元)" prop="chargeCeiling" />
        <el-table-column label="计费方式" prop="chargeType" :formatter="formatType" />
        <el-table-column label="计费规则" prop="ruleNameView" />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="box">
      <el-pagination  :current-page="params.page"
        :page-sizes="[1, 2, 5, 10]" 
        :page-size="params.pageSize" 
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible="dialogVisible" @close="handleClose">
      <div style="display: flex;justify-content: center;">
        <el-form ref="form" style="width:400px" :rules="rules" :model="form">
          <el-form-item label="计费规则编号" prop="ruleNumber">
            <el-input v-model="form.ruleNumber" placeholder="请输入计费规则编号" />
          </el-form-item>

          <el-form-item label="计费规则名称" prop="ruleName">
            <el-input v-model="form.ruleName" placeholder="请输入计费规则名称" />
          </el-form-item>

          <el-form-item label="计费方式" prop="chargeType">
            <el-radio-group v-model="form.chargeType">
              <el-radio label="duration" border @change="shi" style="width: 105px;">时长收费</el-radio>
              <el-radio label="turn" border @change="ci" style="width: 105px;">按次收费</el-radio>
              <el-radio label="partition" border @change="duan" style="width: 105px;">分段收费</el-radio>
            </el-radio-group>
          </el-form-item>

          <div>
            <el-form-item label="免费时长" class="time" prop="freeDuration">
              <el-input-number v-model="form.freeDuration" controls-position="right" :min="0"
                style="height:40px; width:170px" placeholder="请输入免费时长">
              </el-input-number>
            </el-form-item>分钟
            <el-form-item label="收费上限" class="time" prop="chargeCeiling">
              <el-input v-model="form.chargeCeiling" placeholder="请输入收费上限" />
            </el-form-item>元
          </div>



          <div>
            <el-form-item  >
              <label for="" class="required">计费规则</label>
              <!-- 按时长收费区域 v-show="shi"-->
              <div style="display:inline-block" v-if="form.chargeType === 'duration'">
                <el-row type="flex" style="height:50px; width:100%; margin-top:10px">
                  每<el-form-item class="duration" prop="durationTime">
                    <el-input-number v-model="form.durationTime" controls-position="right" :min="0"
                      style="height:40px;width:120px" placeholder="请输入">
                    </el-input-number>
                  </el-form-item>

                  <el-form-item prop="durationType">
                    <el-select v-model="form.durationType" class="duration">
                      <el-option label='小时' value="hour" />
                      <el-option label='分钟' value="minute" />
                    </el-select>
                  </el-form-item>

                  <el-form-item class="duration" prop="durationPrice">
                    <el-input v-model="form.durationPrice" placeholder="请输入" />
                  </el-form-item>元
                </el-row>
              </div>


              <!-- 按次收费区域 v-show="ci" -->

              <div class="turn" v-if="form.chargeType === 'turn'">
                <el-row type="flex" style="height:100%; width:100%; margin-top:10px">
                  <el-form-item class="turn" prop="turnPrice">
                    每次 <el-input v-model="form.turnPrice" class="input-box" placeholder="请输入金额" /> 元
                  </el-form-item>
                </el-row>
              </div>

              <!-- 按分段收费区域 v-show="duan"-->
              <div class="partition" v-if="form.chargeType === 'partition'">
                <el-row type="flex" style="height:50px; width:100%; margin-top:10px">
                  <el-form-item class="item" prop="partitionFrameTime">
                    <el-input-number v-model="form.partitionFrameTime" class="duration1" controls-position="right" :min="0"
                      style="height:40px;width:110px" placeholder="请输入" />小时内,每小时收费
                  </el-form-item>
                  <el-form-item class="item" prop="partitionFramePrice">
                    <el-input v-model="form.partitionFramePrice" class="duration2" placeholder="请输入" /> 元
                  </el-form-item>
                </el-row>
                <el-row type="flex" style="height:50px;width:100%;margin-top:10px">
                  <el-form-item class="item" prop="partitionIncreaseTime">
                    每增加<el-input-number v-model="form.partitionIncreaseTime" class="duration3" controls-position="right" :min="0"
                       style="height:40px;width:110px" placeholder="请输入" />小时,增加
                  </el-form-item>
                  <el-form-item class="item" prop="partitionIncreasePrice">
                    <el-input v-model="form.partitionIncreasePrice" class="duration4" placeholder="请输入" /> 元
                  </el-form-item>
                </el-row>
              </div>


            </el-form-item>
          </div>

          <div>
            <el-form-item>
              <el-button @click="Cancel">取消</el-button>
              <el-button type="primary" @click="confirm">确认</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCarRuleListAPI, addCarRuleListAPI,  delCarRuleListAPI, editCarRuleListAPI} from '@/api/rule'
export default {
  name: 'Rule',
  data() {
    return {
      dist: null,
      ruleList: [],
      total: null,
      dialogVisible: false,
      params: {
        page: 1,
        pageSize: 10
      },

      form: {
        ruleNumber: '',
        ruleName: '',
        chargeType: 'duration',
        chargeCeiling: '',
        freeDuration: '0',
        durationTime: '',
        durationPrice: '',
        durationType: '',
        turnPrice: '',
        partitionFrameTime: '',
        partitionFramePrice: '',
        partitionIncreaseTime: '',
        partitionIncreasePrice: '',

      },

      rules: {//非空校验
        ruleNumber: [
          { required: true, message: '请填写计费规则编号', trigger: 'blur' },
        ],
        ruleName: [
          { required: true, message: '请填写计费规则名称', trigger: 'blur' },
        ],
        chargeType: [
          { required: true, message: '请填写计费方式', trigger: 'blur' },
        ],
        chargeCeiling: [
          { required: true, message: '请填写收费上限', trigger: 'blur' },
        ],
        freeDuration: [
          { required: true, message: '请填写免费时长', trigger: 'blur' },
        ],
        durationTime: [
          { required: true, message: '请填写计费时间', trigger: 'blur' },
        ],
        durationPrice: [
          { required: true, message: '请填写计费金额', trigger: 'blur' },
        ],
        durationType: [
          { required: true, message: '请选择计费时间方式', trigger: 'blur' },
        ],
        turnPrice: [
          { required: true, message: '请填写计费金额', trigger: 'blur' },
        ],
        partitionFrameTime: [
          { required: true, message: '请填写计费时间', trigger: 'blur' },
        ],
        partitionFramePrice: [
          { required: true, message: '请填写计费金额', trigger: 'blur' },
        ],
        partitionIncreaseTime: [
          { required: true, message: '请填写计费时间', trigger: 'blur' },
        ],
        partitionIncreasePrice: [
          { required: true, message: '请填写计费金额', trigger: 'blur' },
        ],
      }

    }
  },

  mounted() {
    this.getList()

  },//调函数，发请求

  methods: {
    fn(val){
    console.log(val)
    //let定义的变量 const定义不会变化的常量
    let str=''
    //遍历数组 
    for(let index  = 0; index<val.length; index++){
      const temp=val[index]
      str=str + temp.id+','// 拼接数据id
    }
    //console.log(str)
    //去掉最后一个数据的','
    const idStr = str.slice(0, str.length - 1)
    this.idStr = idStr

  },

    delMore(){
    this.$confirm('你确定要删除这些月卡吗？').then(() => {
      delCarRuleListAPI(this.idStr).then(() => {
        this.$message.success('删除成功')
        //重新获取数据
        this.getList()
      })
    })
  },

    edit(row) {
      console.log("row", row)
      this.dialogVisible = true
      this.form.ruleNumber = row.ruleNumber
      this.form.ruleName = row.ruleName
      this.form.chargeType = row.chargeType
      this.form.chargeCeiling = row.chargeCeiling
      this.form.freeDuration = row.freeDuration
      this.form.durationTime = row.durationTime
      this.form.durationPrice = row.durationPrice
      this.form.durationType = row.durationType
      this.form.turnPrice = row.turnPrice
      this.form.partitionFrameTime = row.partitionFrameTime
      this.form.partitionFramePrice = row.partitionFramePrice
      this.form.partitionIncreaseTime = row.partitionIncreaseTime
      this.form.partitionIncreasePrice = row.partitionIncreasePrice
      this.form.id = row.id

      if (this.form.chargeType === 'duration') {
        if (row.ruleNameView.includes("小时")) {
          this.form.durationType = 'hour'
          this.form.durationTime = row.ruleNameView.slice(1, row.ruleNameView.indexOf('小'))
          this.form.durationPrice = row.ruleNameView.slice(row.ruleNameView.indexOf('时') + 1, row.ruleNameView.indexOf('元'))
        }
        else {
          this.form.durationType = 'minute'
          this.form.durationTime = row.ruleNameView.slice(1, row.ruleNameView.indexOf('分'))
          this.form.durationPrice = row.ruleNameView.slice(row.ruleNameView.indexOf('钟') + 1, row.ruleNameView.indexOf('元'))
        }


      } else if (this.form.chargeType === 'turn') {
        this.form.turnPrice = row.ruleNameView.slice(2, row.ruleNameView.indexOf('元'))
      }
      else if (this.form.chargeType === 'partition') {
        this.form.partitionFrameTime = row.ruleNameView.slice(0, row.ruleNameView.indexOf('小'))
        this.form.partitionFramePrice = row.ruleNameView.slice(row.ruleNameView.indexOf('费') + 1, row.ruleNameView.indexOf('元'))
        this.form.partitionIncreaseTime = row.ruleNameView.slice(row.ruleNameView.indexOf('加') + 1, row.ruleNameView.lastIndexOf(',') - 2)
        this.form.partitionIncreasePrice = row.ruleNameView.slice(row.ruleNameView.lastIndexOf(',') + 3, row.ruleNameView.lastIndexOf('元'))

      }

    },

    confirm() {
      this.$refs.form.validate((ok) => {
        if (ok) {
          if (this.form.id) {//编辑
            console.log("this.form", this.form)
            editCarRuleListAPI(this.form).then(() => {
              this.$message.success('编辑成功了啦！')
              this.getList()
              this.dialogVisible = false
              this.form = {
                ruleNumber: '',
                ruleName: '',
                chargeType: '',
                chargeCeiling: '',
                freeDuration: '',
                durationTime: '',
                durationPrice: '',
                durationType: '',
                turnPrice: '',
                partitionFrameTime: '',
                partitionFramePrice: '',
                partitionIncreaseTime: '',
                partitionIncreasePrice: '',

              }
            }).catch((error) => {
              this.$message.error(error.response.data.msg);
            })
          } else {//添加
            console.log("this.form", this.form)
            addCarRuleListAPI(this.form).then(() => {
              this.$message.success('添加成功')
              this.getList()
              this.dialogVisible = false
              this.form = {
                ruleNumber: '',
                ruleName: '',
                chargeType: '',
                chargeCeiling: '',
                freeDuration: '',
                durationTime: '',
                durationPrice: '',
                durationType: '',
                turnPrice: '',
                partitionFrameTime: '',
                partitionFramePrice: '',
                partitionIncreaseTime: '',
                partitionIncreasePrice: '',

              }
            })
          }

        }
      })
    },

    del(id) {//删除
      this.$confirm('你确定要删了吗，宝宝？').then(() => {
        delCarRuleListAPI(id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
      })
    },

    getList() {
      getCarRuleListAPI(this.params).then((res) => {
        console.log("rows", res.data.rows)
        //存数据，显示在页面
        this.ruleList = res.data.rows
        this.total = res.data.total
      })
    },


    shi() {
      this.$refs.form.clearValidate();
    },
    ci() {
      this.$refs.form.clearValidate();
    },
    duan() {
      this.$refs.form.clearValidate();
    },

    open() {
      this.dialogVisible = true
    },

    handleCurrentChange(page) {//更新页码
      this.params.page = page
      this.getList()
    },

    handleSizeChange(pageSize) {//更新每页条数
      this.params.pageSize = pageSize
      this.getList()
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        ruleNumber: '',
        ruleName: '',
        chargeType: '',
        chargeCeiling: '',
        freeDuration: '',
        durationTime: '',
        durationPrice: '',
        durationType: '',
        turnPrice: '',
        partitionFrameTime: '',
        partitionFramePrice: '',
        partitionIncreaseTime: '',
        partitionIncreasePrice: '',
      }
      this.$refs.form.clearValidate();
    },
    Cancel() {
      this.dialogVisible = false
      // this.$refs.form.clearValidate();
    },

    formatType(row) {
      const map = {
        'duration': '时长收费',
        'turn': '按次收费',
        'partition': '分段收费'

      }
      return map[row.chargeType]
    },


  }
}
</script>

<style lang="scss" scoped>
.time {

  width: 175px;
  display: inline-block
}

.item {
  margin: 12px 0;
  display: inline-block
}

.duration1 {
  width: 100px;
  display: inline-block
}

.duration2 {
  width: 150px;
  display: inline-block
}

.duration3 {
  width: 110px;
  display: inline-block
}

.duration4 {
  width: 170px;
  display: inline-block
}

.duration {
  width: 120px;
  display: inline-block
}

.input-box {
  width: 105px;
  display: inline-block
}

.rule-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}

.box {
  // flex 弹性容器布局
  display: flex;
  // 默认从左到右 从右到左
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 20px;
}


.required:before{
content:'* ';
color: RGB(247,135,135);
}

</style>